<div *ngIf="workflowTemplate;then showWorkflowTemplate;else loadWorkflowTemplate"></div>
<ng-template #showWorkflowTemplate>
    <nz-alert *ngIf="workflowTemplate.editable && groups && groups.length === 0" nzType="warning"
              nzMessage="No group can be found, you will not be able to save current resource.">
    </nz-alert>
    <form nz-form nzLayout="vertical">
        <nz-row>
           <nz-col [nzSpan]="6">
               <nz-form-item>
                   <nz-form-label>Name*</nz-form-label>
                   <nz-form-control>
                       <input nz-input type="text" name="name" [(ngModel)]="workflowTemplate.name"
                              [readonly]="!workflowTemplate.editable">
                   </nz-form-control>
               </nz-form-item>
           </nz-col>
            <nz-col [nzSpan]="6">
                <nz-form-item>
                    <nz-form-label>Slug*</nz-form-label>
                    <nz-form-control>
                        <input nz-input type="text" name="slug" [ngModel]="workflowTemplate.slug"
                               [disabled]="true">
                    </nz-form-control>
                </nz-form-item>
            </nz-col>
            <nz-col [nzSpan]="6">
                <nz-form-item>
                    <nz-form-label>Group*</nz-form-label>
                    <nz-form-control>
                        <nz-select nzShowSearch *ngIf="groups && workflowTemplate.editable"
                                   [nzDisabled]="loading"
                                   name="group"
                                   [(ngModel)]="workflowTemplate.group_id" >
                            <nz-option *ngFor="let group of groups" [nzValue]="group.id" [nzLabel]="group.name"></nz-option>
                        </nz-select>
                        <input nz-input *ngIf="!workflowTemplate.editable" type="text"
                               name="group" [ngModel]="workflowTemplate.group?.name" [readonly]="true">
                    </nz-form-control>
                </nz-form-item>
            </nz-col>
            <nz-col [nzSpan]="6">
                <nz-form-item>
                    <nz-form-label>Version</nz-form-label>
                    <nz-form-control>
                        <input nz-input type="text" name="version" [ngModel]="workflowTemplate.version"
                               [disabled]="true">
                    </nz-form-control>
                </nz-form-item>
            </nz-col>
        </nz-row>
        <nz-row>
            <nz-col [nzSpan]="24">
                <nz-form-item>
                    <nz-form-label>Description</nz-form-label>
                    <nz-form-control>
                        <textarea nz-input name="description" [(ngModel)]="workflowTemplate.description"
                                  (ngModelChange)="descriptionChange()" [rows]="descriptionRows"
                                  [readonly]="!workflowTemplate.editable"></textarea>
                    </nz-form-control>
                </nz-form-item>
            </nz-col>
        </nz-row>
        <ng-container *ngIf="!(mode === 'add')">
            <nz-row *ngIf="(workflowTemplate.editable) || parameterKeys.length > 0">
                <h3>Parameters</h3>
            </nz-row>
            <nz-row *ngFor="let k of parameterKeys; let index = index">
                <nz-col [nzSpan]="12">
                    <nz-form-item>
                        <nz-form-control>
                            <input nz-input type="text" name="parameter-key-{{index}}" placeholder="Name"
                                   [(ngModel)]="parameterValues[k].key"
                                   [readonly]="!workflowTemplate.editable">
                        </nz-form-control>
                    </nz-form-item>
                </nz-col>
                <nz-col [nzSpan]="6">
                    <nz-form-item>
                        <nz-form-control>
                            <nz-select *ngIf="workflowTemplate.editable" nzShowSearch
                                       name="parameter-type-{{index}}" nzPlaceHolder="{{'common_select' | translate}}"
                                       [(ngModel)]="parameterValues[k].type">
                                <nz-option *ngFor="let opt of templateParameterTypes" [nzLabel]="opt" [nzValue]="opt"></nz-option>
                            </nz-select>
                            <input nz-input *ngIf="!workflowTemplate.editable" type="text"
                                   name="parameter-type-{{index}}" [ngModel]="parameterValues[k].type" [readonly]="true">
                        </nz-form-control>
                    </nz-form-item>
                </nz-col>
                <nz-col [nzSpan]="4">
                    <nz-form-item>
                        <nz-form-control>
                            <label nz-checkbox name="parameter-required-{{index}}" [(ngModel)]="parameterValues[k].required" [disabled]="!workflowTemplate.editable">Required</label>
                        </nz-form-control>
                    </nz-form-item>
                </nz-col>
                <nz-col [nzSpan]="2">
                    <nz-form-item nzJustify="end">
                        <button nz-button *ngIf="workflowTemplate.editable" nzDanger nzType="primary"
                                (click)="clickRemoveParameter(k)">
                            <i nz-icon nzType="delete" nzTheme="outline"></i>
                        </button>
                    </nz-form-item>
                </nz-col>
            </nz-row>
            <nz-row>
                <nz-col [nzSpan]="12">
                    <nz-form-item>
                        <nz-form-control>
                            <input nz-input type="text" name="parameter-key-add" placeholder="Name"
                                   [(ngModel)]="parameterValueAdd.key">
                        </nz-form-control>
                    </nz-form-item>
                </nz-col>
                <nz-col [nzSpan]="6">
                    <nz-form-item>
                        <nz-form-control>
                            <nz-select name="parameter-type-add" nzShowSearch
                                        nzPlaceHolder="{{'common_select' | translate}}"
                                       [(ngModel)]="parameterValueAdd.type">
                                <nz-option *ngFor="let opt of templateParameterTypes" [nzValue]="opt" [nzLabel]="opt"></nz-option>
                            </nz-select>
                        </nz-form-control>
                    </nz-form-item>
                </nz-col>
                <nz-col [nzSpan]="4">
                    <nz-form-item>
                        <nz-form-control>
                            <label nz-checkbox name="parameter-required-add" [(ngModel)]="parameterValueAdd.required">Required</label>
                        </nz-form-control>
                    </nz-form-item>
                </nz-col>
                <nz-col [nzSpan]="2">
                    <nz-form-item nzJustify="end">
                        <button nz-button nzType="primary" (click)="clickAddParameter()">
                            <i nz-icon nzType="plus" nzTheme="outline"></i>
                        </button>
                    </nz-form-item>
                </nz-col>
            </nz-row>
            <nz-row>
                <h3>Workflow</h3>
            </nz-row>
            <nz-row>
                <nz-col [nzSpan]="24">
                    <app-workflow-template-editor name="workflow-value"
                                                  [editable]="workflowTemplate.editable" [value]="workflowValue"
                                                  (changeValue)="workflowValueChange($event)" [error]="workflowError">
                    </app-workflow-template-editor>
                </nz-col>
            </nz-row>
            <ng-container *ngIf="(workflowTemplate.editable) || pipelineKeys.length > 0">
                <nz-row>
                    <h3 class="subItem">Pipelines</h3>
                </nz-row>
                <nz-row *ngFor="let k of pipelineKeys" class="codeContainer">
                    <nz-col [nzSpan]="24">
                        <app-workflow-template-editor name="pipeline-value-{{k}}"
                                                      [editable]="workflowTemplate.editable" [removable]="true"
                                                      [value]="pipelineValues[k]" (changeValue)="pipelineValueChange(k, $event)"
                                                      (remove)="clickRemovePipeline(k)" [error]="pipelineErrors[k]">
                        </app-workflow-template-editor>
                    </nz-col>
                </nz-row>
                <nz-row>
                    <button nz-button nzType="primary" *ngIf="workflowTemplate.editable" (click)="clickAddPipeline()">
                        <i nz-icon nzType="plus" nzTheme="outline"></i>
                    </button>
                </nz-row>
            </ng-container>
            <ng-container *ngIf="(workflowTemplate.editable) || applicationKeys.length > 0">
                <nz-row>
                    <h3 class="subItem">Applications</h3>
                </nz-row>
                <nz-row class="codeContainer" *ngFor="let k of applicationKeys">
                    <nz-col [nzSpan]="24">
                        <app-workflow-template-editor name="application-value-{{k}}"
                                                      [editable]="workflowTemplate.editable" [removable]="true"
                                                      [value]="applicationValues[k]" (changeValue)="applicationValueChange(k, $event)"
                                                      (remove)="clickRemoveApplication(k)" [error]="applicationErrors[k]">
                        </app-workflow-template-editor>
                    </nz-col>
                </nz-row>
                <nz-row>
                    <button nz-button nzType="primary" *ngIf="workflowTemplate.editable" (click)="clickAddApplication()">
                        <i nz-icon nzType="plus" nzTheme="outline"></i>
                    </button>
                </nz-row>
            </ng-container>
            <ng-container *ngIf="(workflowTemplate.editable) || environmentKeys.length > 0">
                <nz-row>
                    <h3 class="subItem">Environments</h3>
                </nz-row>
                <nz-row class="codeContainer" *ngFor="let k of environmentKeys">
                    <nz-col [nzSpan]="24">
                        <app-workflow-template-editor name="environment-value-{{k}}"
                                                      [editable]="workflowTemplate.editable" [removable]="true"
                                                      [value]="environmentValues[k]" (changeValue)="environmentValueChange(k, $event)"
                                                      (remove)="clickRemoveEnvironment(k)" [error]="environmentErrors[k]">
                        </app-workflow-template-editor>
                    </nz-col>
                </nz-row>
                <nz-row>
                    <button nz-button nzType="primary" *ngIf="workflowTemplate.editable"
                            (click)="clickAddEnvironment()">
                        <i nz-icon nzType="plus" nzTheme="outline"></i>
                    </button>
                </nz-row>
            </ng-container>
            <nz-row  *ngIf="workflowTemplate.editable && mode === 'edit'" class="subItem">
                <nz-col [nzSpan]="24">
                    <textarea nz-input name="changeMessage" [(ngModel)]="changeMessage"
                              [placeholder]="'workflow_template_change_message' | translate" [rows]="3"></textarea>
                </nz-col>
            </nz-row>
        </ng-container>
        <nz-row *ngIf="workflowTemplate.editable" class="subItem">
            <nz-col [nzSpan]="24">
                <button nz-button nzType="primary" class="floatRight" [nzLoading]="loading" (click)="clickSave()">
                    <i nz-icon nzType="save" nzTheme="outline"></i>Save
                </button>
                <button  *ngIf="mode === 'edit'" class="floatRight" nz-button nzDanger nzType="primary" [nzLoading]="loading"
                                 nz-popconfirm nzPopconfirmTitle="Are you sure you want to delete this template ?" (nzOnConfirm)="clickDelete()">
                    <i nz-icon nzType="delete" nzTheme="outline"></i>Delete
                </button>
            </nz-col>
        </nz-row>
    </form>
</ng-template>
<ng-template #loadWorkflowTemplate>
    <nz-spin nzTip="Loading..."></nz-spin>
</ng-template>
